<template>
  <el-dialog
    title="添加知识"
    width="70%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-form :model="form" label-width="80px" size="mini">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="分类">
            <el-select v-model="form.cate_id" filterable>
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排序">
            <el-input v-model="form.sort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采集策略">
            <el-input v-model="form.puppeteer"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="来源">
            <el-input v-model="form.from"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来源地址">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="编辑内容">
        <wang-editor ref="editor"></wang-editor>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="hide">
        取消
      </el-button>
      <el-button type="primary" :loading="appLoading" size="mini" @click="sub">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import { AppLoadingMixin } from "../../lib/mixins/app-loading";
import { FIELDS } from "../../lib/tables/wiki";
import { stateTypes } from "../../store/admin";
import { UploadMixin } from "../../lib/mixins/upload";

export default {
  name: "WikiAddDialog",
  mixins: [AppLoadingMixin, UploadMixin],
  data() {
    return {
      form: {},
      options: [],
      info: {},
      showTag: false
    };
  },
  computed: {
    ...mapState("admin", [stateTypes.loginInfo])
  },
  methods: {
    async show(data) {
      this.info = data;
      this.setForm();
      this.showTag = true;
      this.$nextTick().then(() => {
        this.$refs.editor.init();
      });
      this.options = await this.loadOptions([]);
      await this.getContent();
    },
    hide() {
      this.resetForm();
      this.showTag = false;
    },
    setForm() {
      const { info } = this;
      FIELDS.forEach(r => {
        info && info[r] && this.$set(this.form, r, info[r]);
      });
    },
    resetForm() {
      this.$refs.editor.editor.txt.clear();
      FIELDS.forEach(r => {
        this.$set(this.form, r, null);
      });
    },
    onSuccess(response) {
      const { data, errno } = response;
      if (errno === 0) this.$set(this.form, "thumb", data.url);
    },
    async getContent() {
      if (!this.info || !this.info.id) return;
      const data = await this.$wikiService.detail(this.info.id);
      this.info = data;
      if (data && data.description) {
        this.$refs.editor.editor.txt.html(data.description);
      }
    },
    async loadOptions(options = [], pageNum = 1) {
      const { data, count } = await this.$cateService.list({
        module: "wiki",
        pageSize: 10,
        pageNum
      });
      options = options.concat(data);
      if (options.length < count) return this.loadOptions(options, ++pageNum);
      return options;
    },
    async sub() {
      const form = { ...this.form };
      form.author_id = this.loginInfo.id;
      form.description = this.$refs.editor.editor.txt.html();
      if (form.id) {
        if (await this.$wikiService.update(form)) {
          this.hide();
          this.$message.success("修改成功");
          this.$emit("ok", form.id);
        }
        return;
      }
      let id;
      if ((id = await this.$wikiService.add(form))) {
        this.hide();
        this.$message.success("添加成功");
        this.$emit("ok", id);
      }
    }
  }
};
</script>

<style scoped></style>
